<template>
  <!-- vue3页面 -->
  <section>
    <a-row style="margin-bottom: 20px" :gutter="[16, 16]">
      <a-col span="12">
        <a-col>
          <div class="mainBox">
            <div class="bar" style="margin-bottom: 20px"></div>
            <div class="echart lt">
              <div class="echart_content">
                <div class="border">
                  <div class="content-number" style="color: #ffeb7b">9898</div>
                  <a-divider class="divider" type="vertical" />
                  <div class="content-number" style="color: #b7eb8f">22</div>
                  <a-divider class="divider" type="vertical" />
                  <div class="content-number" style="color: #87e8de">5555</div>
                  <a-divider class="divider" type="vertical" />
                  <div class="content-number" style="color: #91d5ff">132</div>
                </div>
                <div class="title">
                  <div class="title-text" style="color: #ffeb7b">职工人数</div>
                  <a-divider class="divider" type="vertical" />
                  <div class="title-text" style="color: #b7eb8f">
                    分工会个数
                  </div>
                  <a-divider class="divider" type="vertical" />
                  <div class="title-text" style="color: #87e8de">会员人数</div>
                  <a-divider class="divider" type="vertical" />
                  <div class="title-text" style="color: #91d5ff">荣誉项数</div>
                </div>
              </div>
              <div class="echart_content">
                <div class="border borderP">
                  <div class="content-number" style="color: #ffeb7b">9898</div>
                  <a-divider class="divider" type="vertical" />
                  <div class="content-number" style="color: #b7eb8f">22</div>
                  <a-divider class="divider" type="vertical" />
                  <div class="content-number" style="color: #87e8de">5555</div>
                  <a-divider class="divider" type="vertical" />
                  <div class="content-number" style="color: #91d5ff">132</div>
                </div>
                <div class="title borderP">
                  <div class="title-text" style="color: #ffeb7b">职工人数</div>
                  <a-divider class="divider" type="vertical" />
                  <div class="title-text" style="color: #b7eb8f">
                    分工会个数
                  </div>
                  <a-divider class="divider" type="vertical" />
                  <div class="title-text" style="color: #87e8de">会员人数</div>
                  <a-divider class="divider" type="vertical" />
                  <div class="title-text" style="color: #91d5ff">荣誉项数</div>
                </div>
              </div>
            </div>
          </div>
          <div class="mainBox">
            <div class="bar"></div>
            <div class="echart lc">
              <div class="lc-echart">
                <MyEchart :options="personHonorOption" ref="personHonorRef" />
              </div>
              <div class="lc-echart">
                <MyEchart :options="lervelOption" ref="lervelRef" />
              </div>
            </div>
          </div>
          <div class="mainBox">
            <div class="bar"></div>
            <div class="echart lb">
              <div class="lb-echart">
                <MyEchart :options="contractOption" ref="contractRef" />
              </div>
              <div class="lb-echart">
                <MyEchart :options="contractOption" ref="contractRef" />
              </div>
            </div>
          </div>
        </a-col>
      </a-col>

      <a-col span="12">
        <div class="mainBox">
          <div class="bar" style="margin-bottom: 20px"></div>
          <div class="echart rt">
            <div class="rt-echart">
              <MyEchart :options="assetsChangeOption" ref="assetsChangeRef" />
            </div>
            <div class="rt-echart">
              <MyEchart :options="honorCountOption" ref="honorCountRef" />
            </div>
          </div>
        </div>
        <div class="mainBox">
          <div class="bar" style="margin-bottom: 20px"></div>
          <div class="echart rc">
            <div class="rc-echart">
              <MyEchart :options="unionBudgetOption" ref="unionBudgetRef" />
            </div>
          </div>
        </div>
        <div class="mainBox">
          <div class="bar" style="margin-bottom: 20px"></div>
          <div class="echart rc">
            <div class="rc-echart">
              <MyEchart :options="unionBudgetOption" ref="unionBudgetRef" />
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </section>
  <div class="box"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, shallowRef, onUnmounted } from "vue";
import MyEchart from "./echart.vue";
import { getAssetsChangeOption } from "./officeOptions/assetsChange";
import { getHonorCountOption } from "./officeOptions/honorCount";
import { getPersonHonorOption } from "./officeOptions/personHonor";
import { getLevelOption } from "./officeOptions/level";
import { getContractOption } from "./officeOptions/contract";
import { getUnionBudgetOption } from "./officeOptions/unionBudget";
// import { workCondoleOptions } from "./options/workCondole";
// import { memberOption } from "./options/member";
// import { sexOption } from "./options/sex";
// import { activityOptions } from "./options/activity";
// import { unionOptions } from "./options/union";
// import gsap from "gsap";

const assetsChangeOption = ref();
const honorCountOption = ref();
const personHonorOption = ref();
const lervelOption = ref();
const contractOption = ref();
const unionBudgetOption = ref();
// const member = ref();
// const sex = ref();
// const activity = ref();
// const union = ref();

/** echarts图表的ref */
const assetsChangeRef = shallowRef();
const honorCountRef = shallowRef();
const personHonorRef = ref();
const lervelRef = ref();
const contractRef = ref();
const unionBudgetRef = shallowRef();
// const sexRef = ref();
// const activityRef = ref();
// const unionRef = ref();

onMounted(() => {
  // gsap.fromTo(
  //   ".box",
  //   {
  //     width: "0%",
  //     // scale: 0,
  //     duration: 3,
  //   },
  //   {
  //     width: "100%",
  //     // scale: 1,
  //     duration: 3,
  //   }
  // );

  //
  assetsChangeOption.value = getAssetsChangeOption();
  honorCountOption.value = getHonorCountOption();
  personHonorOption.value = getPersonHonorOption();
  lervelOption.value = getLevelOption();
  contractOption.value = getContractOption();
  unionBudgetOption.value = getUnionBudgetOption();
  // member.value = memberOption();
  // sex.value = sexOption();
  // activity.value = activityOptions();
  // union.value = unionOptions();

  // console.log(proposlTypeOption.value);

  // console.log(roll.value.clientHeight - rollBox.value.clientHeight);
  // console.log(rollBox.value.clientHeight);
  window.addEventListener("resize", onResize);
});

const onResize = () => {
  assetsChangeRef.value.resize();
  honorCountRef.value.resize();
  personHonorRef.value.resize();
  lervelRef.value.resize();
  unionBudgetRef.value.resize();
};

onUnmounted(() => {
  window.removeEventListener("resize", onResize);
});
</script>

<style scoped lang="less">
@font-face {
  font-family: "number";
  src: url("../../assets/echart/number.ttf");
}
section {
  padding: 0 10px;
  color: #fff;
}
.mainBox {
  position: relative;
  width: 100%;
  height: 310px;
  margin-bottom: 20px;
}
.bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 20px solid transparent;
  border-width: 50px 30px 20px 30px;
  border-image: url("../../assets/echart/border.png") 50 30 20 30 stretch;
  box-sizing: border-box;
  .title {
    color: white;
    font-size: 16px;
    padding: 10px 0 0 40px;
  }
}
.lt {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lc {
  display: flex;
  .lc-echart {
    z-index: 2;
    width: 50%;
    height: 100%;
  }
}
.rc {
  z-index: 2;
  .rc-echart {
    width: 100%;
    height: 100%;
  }
}
.lc {
  display: flex;
  .lc-echart {
    z-index: 2;
    width: 50%;
    height: 100%;
  }
}
.lb {
  display: flex;
  .lb-echart {
    z-index: 2;
    width: 50%;
    height: 100%;
  }
}
.rt {
  display: flex;
  .rt-echart {
    width: 50%;
    height: 100%;
  }
}
.echart {
  padding: 0 3px 5px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .echart_content {
    width: 100%;
    height: 130px;
    padding: 10px 20px;
    .content-number {
      flex: 1;
      font-size: 50px;
      font-family: "number";
      text-align: center;
    }
    .divider {
      height: 40px;
      border-color: rgba(255, 255, 255, 0.2);
      margin: 0;
    }
    .border {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      border: 1px solid rgba(25, 186, 139, 0.17);
      height: 60px;
    }
    .title {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border: 1px solid rgba(25, 186, 139, 0.17);
      border-top: none;
      &-text {
        flex: 1;
        text-align: center;
        font-size: 16px;
      }
      .divider {
        height: 20px;
        border-color: rgba(255, 255, 255, 0.2);
        margin: 0;
      }
    }
  }
  .number-card {
    display: flex;
    margin-top: 20px;
    justify-content: space-around;
    .number-text:nth-child(1) {
      color: #ffadd2;
    }
    .number-text:nth-child(2) {
      color: #2db7f5;
    }
    .number-text:nth-child(3) {
      color: #87d068;
    }
    .number-text:nth-child(4) {
      color: #108ee9;
    }
    .number-text {
      padding-top: 35px;
      width: 180px;
      height: 207px;
      background: url("../../assets/echart/card.png") no-repeat;
      display: flex;
      flex-direction: column;
      &-item {
        text-align: center;
        font-size: 32px;
        font-family: "number";
        z-index: 99;
        .noNumber {
          font-size: 12px;
          font-style: normal;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>